<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="author" content="order by dede58.com"/>
    <title>绑定手机</title>
    <link rel="stylesheet" type="text/css" href="css/jiazaitoubu.css">
    <link rel="stylesheet" type="text/css" href="css/css.css">
    <script src="js/jquery-1.8.3.min.js"></script>
    <script src="js/index2.js"></script>
    <link rel="stylesheet" type="text/css" href="css/center.css">
    <link rel="stylesheet" type="text/css" href="css/city.css">
    <script src="js/Popt.js"></script>
    <script src="js/cityJson.js"></script>
    <script src="js/citySet.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>

    <script src="js/common.js"></script>

</head>


<body>
<div id="app">	
<top></top>
<bar></bar>

<div class="centers_m">
   <bars></bars>
   <div class="public_m1">
            <div class="public_m2">绑定手机</div>
            <!--提示信息-->
            <div class="tip_notem">
                <ul>
                    <li>1. 绑定手机后可直接通过短信接受安全验证等重要操作。</li>
                    <li>2. 更改手机时，请通过安全验证后重新输入新手机号码绑定。</li>
                    <li>3. 收到安全验证码后，请在1分钟内完成验证。</li>
                </ul>
            </div>
            <div class="public_m4">
                <p>
                    <em><h1>绑定手机号码：</h1></em>

                <input v-model="userinfo.phone" type="text" style=" height:30px; border:1px solid #eaeaea; width:240px">

                    <input type="button" :disabled="dis" id="send" @click="click" class="btn_mfyzm" :value="message" style=" border:1px solid #c8c8c8; margin-left:12px; height:30px"/>
                </p>
                <p>
                    <em><h1>收到的验证码：</h1></em>
                    <input type="text" style=" height:30px; border:1px solid #eaeaea; width:240px">
                </p>
                <button  class="public_m3" @click="changePhone">立即绑定</button>
            </div>
        </div>
    </div>
    <end></end>
    </div>
</body>
</html>

<script>
    var app = new Vue({
    el: "#app",
        data: {//存放数据
        message: '点击获取验证码',
            dis:null,
            count:'60',
        userinfo: {
            id:1,
            profile:'',
        },//存放后端的数据
        pageInfo: {},//分页数据
        sortAsc: true,//排序顺序
            showTab: true,//显示所有数据表格
            showAdd: false,//显示添加的输入框
            addFaultType: {id: 0},//存放新增加的数据
        sizes: [5, 10, 15, 20, 25, 30],
            pageSize: 5,
            err: {
            title: "",
                sort: ""
        },
        selectTitle: {
            title: "",
                id: 0,
        },
    },
    created: function () {
        this.initData(1);//初始化方法
    },

    methods: {
        //数据初始化
        initData: function (pageNum) {

            this.showTab = true;
            this.showAdd = false;
            axios.post("http://localhost:8080/manage/showUserinfoType?id=1")
                //链接数据库
                .then(res => {
                    console.log(res.data.data);
                    this.userinfo=res.data.data;



                });
        },
        changePhone(){
          axios.post("http://localhost:8080/manage/updateUserinfo?id=1",this.userinfo)
              .then(res=>{
                  alert("修改成功")
          });
        },
        click() {
            this.message = '重新获取' + '(' + this.count + ')' + 's'
            this.dis = 'disabled';

        }


    }

    });
</script>
<script>
    //模拟下拉菜单的js*/

    $(".sjhcp_in span").on("mouseenter", function(e)
    {
        if($(".little_list").is(":hidden"))
        {
            $(".little_list").show();
        }
        else
        {
            $(".little_list").hide();
        }
        $(".little_list em").click(function()
        {
            var txt=$(this).text();
            $(".sjhcp_in span").text(txt);
            $(".little_list").hide();
        })
        $(document).one("click", function()
        {
            $(".little_list").hide();
        });
        e.stopPropagation();
    });
    $(".little_list").on("click", function(e)
    {
        e.stopPropagation();
    });

    window.onload=function()
    {
        $(".aside").css({display:"none"})
        $(".important").mouseenter(function(){
            $(".aside").css({display:"block"})
        }).mouseleave(function(){
            $(".aside").css({display:"none"})
        })
    }

</script>
<script type="text/javascript">
    $(function()
    {
        $(".centers_listm_one_in").click(function()
        {
            $(this).next(".gjszmdm").slideToggle().siblings("gjszmdm").slideUp()
        });
    })
</script>

